import React from "react";
// import { Map } from "immutable";
// import { List } from "immutable";
// import { Seq } from "immutable";
// import { fromJS } from "immutable";
import { Range } from "immutable";

const App = () => {
  // Map是用来创建immutable对象的
  // Map对象的数据类型不是标准的js的数据类型
  // const map1 = Map({
  //   a: 3,
  //   b: 4,
  // });
  // toJS()可以将immutable对象转成普通对象。只用来做调试
  // console.log(map1.toJS());
  // get()用于获取immutable对象的值
  // console.log(map1.get("a"));
  // set()用于生成一个新的immutable对象
  // const map2 = map1.set("a", 10);
  // console.log(map2.toJS());

  // const map1 = Map({
  //   a: 3,
  //   b: 4,
  // });
  // const map2 = map1.set("a", 3);
  // 生成的新对象，如果和原对象内容相同，地址相同，内容不同，地址不同
  // console.log(map1 === map2);

  // const map1 = Map({
  //   a: 3,
  //   b: 4,
  // });
  // const map2 = Map({
  //   a: 3,
  //   b: 4,
  // });
  // 单独生成的immutable对象，那么地址不同
  // console.log(map1 === map2);
  // equals()方法只是比较里面的内容
  // console.log(map1.equals(map2));

  // 创建immutable数组
  // immutable数组可以使用多个js原生数组相同名字的方法
  // immutable数组用size属性表示长度
  // const list1 = List([1, 2]);
  // const list2 = list1.push(3, 4, 5);
  // const list3 = list2.unshift(0);
  // const list4 = list1.concat(list2, list3);
  // console.log(list4.size);

  // Map对象是可以使用map进行映射
  // const alpha = Map({ a: 1, b: 2, c: 3, d: 4 });
  // const upperCase = alpha.map((v, k) => k.toUpperCase()).join();
  // console.log(upperCase);

  // Map对象的合并
  // 可以使用merge和mergeDeep进行合并
  // const map1 = Map({ a: 1, b: 2, z: { x: 10, y: 20 } });
  // const map2 = Map({ c: 3, d: 4, b: 5, z: { x: 30, w: 40 } });
  // const map3 = map1.merge(map2);
  // const map3 = map1.mergeDeep(map2);
  // console.log(map3.toJS());

  // map对象可以合并普通对象
  // const map1 = Map({
  //   a: 3,
  //   b: 4,
  // });
  // const map2 = map1.merge({ c: 5 });
  // console.log(map2);

  // list数组可以使用concat进行合并
  // list数组可以合并普通数组
  // const list1 = List([1, 2, 3]);
  // const list2 = List([4, 5]);
  // const list3 = list1.concat([4, 5]);
  // const list3 = [4, 5].concat(list1);
  // console.log(list3);

  // Seq可以去生成对象和数组
  // const map1 = Seq({ a: 3, b: 4 });
  // console.log(map1);
  // const list1 = Seq([1, 2, 3]);
  // console.log(list1);

  // Seq是有惰性的
  // const oddSquares = Seq([1, 2, 3, 4, 5, 6, 7, 8])
  //   .filter((x) => {
  //     console.log("filter x:" + x);
  //     return x % 2 !== 0;
  //   })
  //   .map((x) => {
  //     console.log("map x:" + x);
  //     return x * x;
  //   });
  // console.log(oddSquares.get(1));

  // const map1 = Map({ a: 3, b: 4, c: { x: 10, y: 20 } });
  // console.log(map1);
  // const map2 = fromJS({ a: 3, b: 4, c: { x: 10, y: 20 } });
  // console.log(map2);

  // const deep = Map({ a: 1, b: 2, c: List([3, 4, 5]) });
  // console.log(deep.toObject()); // {a: 1, b: 2, c: List}
  // console.log(deep.toArray()); // [Array(2), Array(2), Array(2)]
  // console.log(deep.toJS()); // {a: 1, b: 2, c: Array(3)}
  // console.log(JSON.stringify(deep)); // {"a":1,"b":2,"c":[3,4,5]}

  // const map1 = Map({
  //   a: 3,
  //   b: 4,
  // });
  // console.log(map1.get("a"));
  // const map2 = map1.set("a", 10);
  // console.log(map2);
  // const map2 = map1.update("a", (v) => v + 1);
  // console.log(map2);

  // const nested = fromJS({ a: { b: { c: [3, 4, 5] } } });
  // const nested2 = nested.mergeDeep({ a: { b: { d: 6 } } });
  // console.log(nested2.toJS());
  // console.log(nested2.getIn(["a", "b", "d"]));
  // const nested3 = nested2.setIn(["a", "b", "d"], 9);
  // const nested4 = nested3.updateIn(["a", "b", "d"], (v) => v * 2);
  // console.log(nested4.toJS());

  const aRange = Range(1, Infinity)
    .skip(1000)
    .map((n) => -n)
    .filter((n) => n % 2 === 0)
    .take(2)
    .reduce((r, n) => r * n, 1);

  console.log(aRange);

  return (
    <>
      <h2>immutable</h2>
      <input type="range" />
    </>
  );
};

export default App;
